
import { SlateEditor, SlateElement, SlateNode, SlateTransforms, } from '@wangeditor/editor';



class MySelectMenu {
  constructor() {
    this.title = '段前距';
    this.tag = 'select';
    this.width = 60;
    this.iconSvg = '<svg viewBox="0 0 1024 1024"><path d="M498.7 655.8l-197.6-268c-8.1-10.9-0.3-26.4 13.3-26.4h395.2c13.6 0 21.4 15.4 13.3 26.4l-197.6 268c-6.6 9-20 9-26.6 0z"></path></svg>';
    this.selectedValue = '1';
  }

  // 下拉框的选项
  getOptions(editor) {
    const currentValue = this.getValue(editor);

    const options = [
      {
        value: '1',
        text: '1',
        selected: this.selectedValue === '1',
      },
      { value: '2', text: '2', selected: this.selectedValue === '2' },
      { value: '3', text: '3', selected: this.selectedValue === '3' },
    ];
    return options;
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return false;
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    return this.selectedValue;; // 匹配 options 其中一个 value
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false;
  }

  exec(editor, value) {
    this.selectedValue = value;

    // 设置段前距
    const newMargin = `${value * 16}px`; // 假设使用 px 单位，具体单位可以根据需求调整
    // 假设 editor.id 返回的是编辑器元素的 ID


    // 获取当前选中的节点
    const { selection } = editor;
    if (selection) {
      const [match] = SlateEditor.nodes(editor, {
        match: n => SlateElement.isElement(n), // 确保匹配的是元素节点
      });

      if (match) {
        const [node, path] = match;
        // node.children[0].marginTop = '320px';
        // 调试信息

        // 更新节点的样式
        const newProperties = {
          ...node.style,
          paddingTop: newMargin,
          display: 'block',
          children: [{ text: '', paddingTop: newMargin, }],
        };
        SlateTransforms.setNodes(editor, newProperties, { at: path });
        editor.updateView();
        // SlateTransforms.setNodes(editor, newProperties, { mode: 'all' }, { at: path, match: n => SlateElement.isElement(n) });
        // editor.updateView();
      } else {
        console.log("没有找到匹配的节点");
      }
    } else {
      console.log("没有选中任何内容");
    }

    editor.hidePanelOrModal();
  }


}
const menuConfig = {
  key: "insertNewMenu", // menukey 唯一。注册之后，需通过toolbarKeys配置到工具栏
  factory() {
    return new MySelectMenu();
  },
};

export default menuConfig;